<template>
  <div class="prop1son">
    <h1>这里是prop的子组件</h1>
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.name }}--{{ item.age }}
      </li>
    </ul>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { defineProps } from "vue";
import { type PersonInter,type Persons } from "../../interfacee/interface1";

// 第一种写法：仅接收
// const props = defineProps(['list'])

// 第二种写法：接收+限制类型
// defineProps<{list:Persons}>()

// // 第三种写法：接收+限制类型+指定默认值+限制必要性
let props = withDefaults(defineProps<{ list?: Persons }>(), {list: () => [{ id: "01", name: "hello Kitty", age: 3 }],});
console.log(props)
</script>
<style scoped>
.prop1son {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
</style>